<template>
  <div class="layout-wrap">
    <div class="content-bg"></div>
    <div class="qc-box">
      <div class="title">
        <img src="@/assets/img/zbig-title.png" alt="" />
        <span class="title-text">全军共享态势</span>
        <span class="year-box">
          <el-date-picker v-model="yearValue" type="year" format="yyyy" value-format="yyyy">
          </el-date-picker>
        </span>
        <div class="setting download el-icon-download" @click="exportImage()">导出态势统计图</div>
        <ScreenFull class="setting screenStyle" id="screenfull" :isIcon="false" />
        <div class="go-back" @click="goHome">
          返回
        </div>
        <div class="time-box">
          <span class="time">{{ timeData.time }}</span>
          <span class="r-t">
            <span class="week">{{ timeData.week }}</span>
            <span class="data">{{ timeData.data }}</span>
          </span>
        </div>
      </div>
      <el-row :gutter="20" class="content">
        <el-col :span="6" style="height: 100%;">
          <div class="left" style="height: 100%;">
            <div class="card top">
              <div class="card-header">
                <span>按共享资源信息统计</span>
              </div>
              <div class="card-square m-t">
                <TopLeft />
              </div>
            </div>
            <div class="card bottom">
              <div class="card-header">
                <span>按学科领域统计</span>
              </div>
              <div class="card-square m-t">
                <BottomLeftChart />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12" style="height: 100%;">
          <div class="center" style="height: 58%;">
            <CenterMap style="height: 100%;" />
          </div>
          <div class="card bottom">
            <div class="card-header">
              <span>按资源类型统计</span>
            </div>
            <div class="card-square m-t">
              <CenterBottom />
            </div>
          </div>
        </el-col>
        <el-col :span="6" style="height: 100%;">
          <div class="right" style="height: 100%;">
            <div class="card top">
              <div class="card-header">
                <span>按大单位资源情况统计</span>
              </div>
              <div class="card-square m-t">
                <TopRight />
              </div>
            </div>
            <div class="card bottom">
              <div class="card-header">
                <span>按投资规模/原值统计</span>
              </div>
              <div class="card-square m-t">
                <BottomRightChart />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import TopRight from "./common/topRight.vue";
import TopLeft from "./common/topLeft.vue";
import BottomLeftChart from "./common/bottomLeftChart.vue";
import BottomRightChart from "./common/bottomRightChart.vue";
import CenterMap from "./common/centerMap.vue";
import CenterBottom from "./common/centerBottom.vue";
export default {
  components: { TopRight, TopLeft, BottomLeftChart, BottomRightChart, CenterMap, CenterBottom },
  data() {
    return {
      yearValue: '2024',
      timeData: {},
      dataInterval: null,
    }
  },
  beforeRouteEnter(to, from, next) {
    localStorage.setItem("hasLoaded", from.fullPath);
    next()
  },
  beforeDestroy() {
    // 清除定时器，当组件销毁时
    if (this.dataInterval) {
      clearInterval(this.dataInterval)
    }
  },
  created() {
    this.dataInterval = setInterval(() => {
      this.timeData = this.getTime()
    }, 1000)
  },
  methods: {
    getYear() {
      let year = new Date().getFullYear() + ''
      this.yearValue = year
    },
    goHome() {
      // let path = localStorage.getItem("hasLoaded") ? localStorage.getItem("hasLoaded") : '/webHome';
      this.$router.push('/facilities')
    },
    getTime() {
      // 创建一个新的Date对象
      let currentDate = new Date()
      // 获取年份
      let year = currentDate.getFullYear() // 返回四位数字形式的年份（如2021）
      // 获取月份（注意月份从0开始计算，所以需要加上1）
      let month = currentDate.getMonth() + 1 // 返回两位数字形式的月份（如9表示九月）
      // 获取日期
      let date = currentDate.getDate() // 返回两位数字形式的日期（如31表示三十一号）
      // 获取星期几（注意星期天为0，星期六为6）
      let weekDays = [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      ]
      let dayOfWeek = weekDays[currentDate.getDay()] // 返回一个数字（0-6），分别表示星期天到星期六
      // 获取小时
      let hours = String(currentDate.getHours()).padStart(2, '0') // 返回两位数字形式的小时（如14表示下午二点）
      // 获取分钟
      let minutes = String(currentDate.getMinutes()).padStart(2, '0') // 返回两位数字形式的分钟（如58表示五十八分）
      let seconds = String(currentDate.getSeconds()).padStart(2, '0')
      let result = {
        time: `${hours}:${minutes}:${seconds}`,
        week: `${dayOfWeek === 0 ? '日' : dayOfWeek}`,
        data: `${year}-${month}-${date}`
      }
      return result
    },
    exportImage() {
      html2canvas(this.$refs.chartView).then(canvas => {
        const link = document.createElement('a')

        link.href = canvas.toDataURL()
        link.download = 'image.png'
        link.click()
      })
    }
  },
}
</script>

<style lang="less" scoped>
  .layout-wrap {
    position: relative;
    width: 100%;
    background: #001d40;
    height: 100vh;
    overflow: hidden;
  }
  .content-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    // background: url('~@/assets/img/qcBG.png') no-repeat;
    // background-size: 100% 100%;
    background: linear-gradient(180deg, #001636 0%, #01132b 100%);
  }
  .qc-box {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 999;
  }
  .card-square {
    width: 100%;
    height: 83%;
    // background: url('~@/assets/img/正方形背景.png') no-repeat;
    // background-size: cover;
    background: linear-gradient(180deg, rgba(4, 34, 73, 0) 0%, #031e42 100%);
  }
  .card-header {
    width: 100%;
    height: 40px;
    background: url('~@/assets/img/小标题背景.png') no-repeat;
    background-size: 100% 100%;
    span {
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      text-shadow: 0px 4px 8px #044591;
      padding-left: 60px;
      line-height: 40px;
    }
  }
  .content {
    height: 90%;
    padding: 0 20px;
  }
  .card {
    border: none;
  }
  .left,
  .center,
  .right {
    height: 100%;
  }
  .top {
    height: 58%;
  }
  .bottom {
    height: 40%;
    // margin-top: 3%;
  }

  .title {
    width: 100%;
    height: 80px;
    text-align: center;
    position: relative;
    margin-bottom: 20px;

    img {
      width: 100%;
      height: 140%;
    }
    .title-text {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0%);
      top: 20px;
      text-shadow: 0px 0px 8px rgba(47, 208, 254, 1);
      width: 500px;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 30px;
      font-family: AlimamaShuHeiTi;
      font-weight: bold;
      white-space: nowrap;
    }
    .go-back,
    .setting {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 14px;
      cursor: pointer;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #fff;
      padding: 6px 16px;
      background: #153867;
      border-radius: 4px;
      &:hover {
        cursor: pointer;
        opacity: 0.6;
      }
    }
    .screenStyle {
      top: 20px;
      right: 100px !important;
    }
    .setting {
      right: 100px;
    }
    .download {
      right: 9.5%;
      padding: 10px;
      top: 18px;
    }
  }
  .time-box {
    position: absolute;
    left: 20px;
    top: 10px;
    z-index: 1;
    display: flex;
    height: 60%;
    align-items: center;
    background: linear-gradient(360deg, #376df9 0%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    .time {
      font-size: 38px;
      font-weight: bold;
      display: inline-block;
      width: 160px;
      margin-right: 10px;
    }
    .r-t {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
  }
  ::v-deep .year-box {
    position: absolute;
    width: 90px;
    left: 20%;
    top: 14px;
    border-radius: 4px;
    background: #153867;
    border-color: #153867;
    .el-date-editor {
      width: 100%;
      .el-input__inner {
        background: transparent;
        border-color: transparent;
        color: #fff !important;
        padding-right: 10px !important;
      }
    }
  }
</style>
